import React, { useEffect } from 'react'
import { Space, Table, Pagination, PaginationProps, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import styles from './index.module.scss'
import { useAppDispatch, useAppSelector } from '@/store'
import { set_is_show_student_edit, set_student_info, set_student_list_data } from '@/store/slice/user'
import { select_student_list_data, select_user_loading } from '@/store/slice/user/select'
import { get_student_list_data_async } from '@/store/slice/user/request'
import dayjs from 'dayjs'
import { get_subject_tree_async } from '@/store/slice/subject/request'
import { DataType } from '../interface'
import { deleteStudent } from '@/util/request'

// 初始PAGE_SIZE的设置
let PAGE_SIZE = 6
// 总条数的显示
const showTotal: PaginationProps['showTotal'] = total => `总共有 ${total} 位学生`
// 每页展示多少条数据
const pageSizeOptions = [6, 8, 10]

// 学生管理表格
export default function ManageTable() {
  const [messageApi, contextHolder] = message.useMessage()

  const dispatch = useAppDispatch()
  // 获取学生列表
  const studentListData = useAppSelector(select_student_list_data)
  const loading = useAppSelector(select_user_loading)

  // 获取学生列表
  useEffect(() => {
    dispatch(
      get_student_list_data_async({
        pageNo: 1,
        pageSize: PAGE_SIZE,
        ...studentListData.search_param
      })
    )
  }, [])

  // 表格数据处理
  const data: DataType[] = studentListData.list?.map((item: any) => {
    return {
      ...item,
      key: item._id
    }
  })

  // 点击编辑按钮
  const editRole = (item: any) => {
    // 设置选中的学生信息
    dispatch(set_student_info(item))
    // 获取课程的树型结构
    dispatch(get_subject_tree_async())
    // modal框的显示
    dispatch(set_is_show_student_edit(true))
  }

  const columns: ColumnsType<DataType> = [
    {
      title: '花名',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>
    },

    {
      title: '技术栈',
      dataIndex: 'techStack',
      key: 'techStack'
    },
    {
      title: '学历',
      dataIndex: 'edu',
      key: 'edu'
    },
    {
      title: '号码',
      dataIndex: 'phone',
      key: 'phone'
    },
    {
      title: '微信',
      dataIndex: 'vChat',
      key: 'vChat'
    },
    {
      title: '毕业时间',
      dataIndex: 'graduation_time',
      key: 'graduation_time',
      render: _ => {
        return <>{dayjs(_).format('YYYY-MM-DD HH:mm:ss')}</>
      }
    },
    {
      title: '注册时间',
      dataIndex: 'created',
      key: 'created',
      render: _ => {
        return <>{dayjs(_).format('YYYY-MM-DD HH:mm:ss')}</>
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => editRole(record)}>编辑</a>
          <a onClick={() => handleDelete(record._id)}>删除</a>
        </Space>
      )
    }
  ]

  // 删除学生
  const handleDelete = async (id: string) => {
    const res: any = await deleteStudent(id)
    if (res.data.code == 200) {
      messageApi.open({
        type: 'success',
        content: '删除学生成功'
      })

      dispatch(
        get_student_list_data_async({
          pageNo: 1,
          pageSize: PAGE_SIZE,
          ...studentListData.search_param
        })
      )
    }
  }

  // 更改页数
  const changePage = (update_pageNo: number, update_pageSize: number) => {
    PAGE_SIZE = update_pageSize
    dispatch(
      get_student_list_data_async({
        pageNo: update_pageNo,
        pageSize: update_pageSize,
        ...studentListData.search_param
      })
    )
    dispatch(set_student_list_data({ current: update_pageNo }))
  }

  return (
    <div className={styles.table}>
      {contextHolder}
      <Table loading={loading} columns={columns} dataSource={data} pagination={false} />
      <Pagination pageSize={PAGE_SIZE} onChange={changePage} current={studentListData.current} total={studentListData.count} pageSizeOptions={pageSizeOptions} showTotal={showTotal} showSizeChanger style={{ marginTop: 20 }} />
    </div>
  )
}
